import React from 'react';
import { Menu, Col, Row, Input } from "antd";
import { HomeOutlined, YoutubeOutlined, SmileOutlined } from "@ant-design/icons"
import { useRouter } from "next/router"

const Header = () => {
    const router = useRouter()
    const { Search } = Input;
    const onSearch = value => {
        router.push(
            {
                pathname: '/search',
                query:{title:value}
            }
        )

    }
    return (
        <div className="header">
            <Row className="menurow">
                <Col xs={10} sm={8} md={8} lg={5} xl={8} xxl={8}>
                    <span className="headerLogo">w博客</span>
                    <span className="headerText">记录生活</span>
                </Col>
                <Col xs={0} sm={10} md={11} lg={10} xl={8} xxl={8}>
                    <Search className="inputSearch" placeholder="input search text" allowClear onSearch={onSearch} style={{ width: 300 }} />
                </Col>
                <Col xs={0} sm={0} md={0} lg={8} xl={8} xxl={8}>
                    <Menu mode="horizontal" >
                        <Menu.Item key="home">
                            <HomeOutlined />
                            <span>首页</span>
                        </Menu.Item>
                        <Menu.Item key="article">
                            <YoutubeOutlined />
                            <span>视频</span>
                        </Menu.Item>
                        <Menu.Item key="life">
                            <SmileOutlined />
                            <span>生活</span>
                        </Menu.Item>
                    </Menu>
                </Col>
            </Row>
        </div>
    )
}

export default Header;